<template>
	<!-- 基因检测 -->
	<view class="genehome" :style="'padding-top:'+ (statusBarHeight+80) +'rpx'">
		<view class="mainview">
			<view class="search_tops flex ali-c">
				<view class="search_inputview">
					<input v-model="keywords" class="search_input" type="text" placeholder="基因与祖源的关系"></input>
					<image class="searchicon" :src="photo_cdn1 + 'zpupload/static/gene/search.png'" mode=""></image>
				</view>
				<image class="scan" :src="photo_cdn1 + 'zpupload/static/gene/scan.png'" mode=""></image>
			</view>
			<!-- 搜索 -->
			
			<view @click="jump1('/pages/gene/mygene/mygene')"  class="genebanner">
				<image class="bannerimg" :src="photo_cdn1 +'zpupload/static/gene/bannerimg.png'" mode=""></image>
				<view class="bannertext">我的基因 ></view>
			</view>
			
			
			<view class="genenavs">
				<view class="genenavstitle">基因分析</view>
				<view class="genenavs_lits flex ali-c jus-a">
					<view @click="jump1('/pages/gene/zuyuanfx/zuyuanfx')"  class="genenavs_item">
						<image class="navimage" :src="photo_cdn1+'zpupload/static/gene/nav1.png'" mode="widthFix"></image>
						<view class="nav_names">祖源分析</view>
					</view>
					<view @click="jump1('/pages/gene/genexq/genexq')"   class="genenavs_item">
						<image class="navimage" :src="photo_cdn1+'zpupload/static/gene/nav2.png'" mode="widthFix"></image>
						<view class="nav_names">基因寻亲</view>
					</view>
					<view @click="jump1('/pages/gene/genefamily/genefamily')" class="genenavs_item">
						<image class="navimage":src="photo_cdn1+'zpupload/static/gene/nav3.png'" mode="widthFix"></image>
						<view class="nav_names">基因家族</view>
					</view>
					<view  @click="jump1('/pages/gene/healthanalysis/healthanalysis')" class="genenavs_item">
						<image class="navimage" :src="photo_cdn1+'zpupload/static/gene/nav4.png'" mode="widthFix"></image>
						<view class="nav_names">健康分析</view>
					</view>
				</view>
			</view>
			
			
			<view class=" genenavstwo">
				<view class="genenavstitle">基因服务</view>
				<view class="genenavs_lits flex ali-c jus-a">
					<view  @click="jump1('/pages/gene/familygenetics/familygenetics')" class="genenavs_item_two">
						<view class="genenavs_item_border flexc">
							<image class="navimage" :src="photo_cdn1+'zpupload/static/gene/nav5.png'" mode="widthFix"></image>
						</view>
						<view class="nav_names_text">家人基因</view>
					</view>
					<view  @click="jump1('/pages/gene/exportdata/exportdata')"  class="genenavs_item_two">
						<view class="genenavs_item_border flexc">
							<image class="navimage" :src="photo_cdn1+'zpupload/static/gene/nav6.png'" mode="widthFix"></image>
						</view>
						<view class="nav_names_text">原始数据</view>
					</view>
					<view  @click="jump1('/pages/gene/genepair/genepair')" class="genenavs_item_two">
						<view class="genenavs_item_border flexc">
							<image class="navimage" :src="photo_cdn1+'zpupload/static/gene/nav7.png'" mode="widthFix"></image>
						</view>
						<view class="nav_names_text">天生一对</view>
					</view>
					<view  @click="jump1('/pages/gene/geneticprediction/geneticprediction')"  class="genenavs_item_two">
						<view class="genenavs_item_border flexc">
							<image class="navimage" :src="photo_cdn1+'zpupload/static/gene/nav8.png'" mode="widthFix"></image>
						</view>
						<view class="nav_names_text">遗传预测</view>
					</view>
				</view>
			</view>
			
			
			<view class="surname_data">
				<view class="surname_title flex ali-c jus-b">
					<view class="surname_navname">姓氏库</view>
					<image class="jiantoua" :src="photo_cdn1+'zpupload/static/user/jiantoua.png'" mode=""></image>
				</view>
				<scroll-view scroll-top="0" scroll-y="true" style="width: 100%;height: 520rpx;" @scrolltolower="upper">
					<view v-for="(item,index) in list" :key="index" hover-class="none" class="zupus_item flex ali-c jus-b" @click="jump(item.id)">			
						<!-- <view class="zupus_item_back" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20240109/dc09d640fce8274d80.png)'}"></view> -->
						<image class="zupus_item_back" :src="photo_cdn1+'zpupload/20240109/dc09d640fce8274d80.png'" mode="aspectFill"></image>
						<view class="flex">
							<view class="itemimgss" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20240103/bf7ced5ee7a0e15045.png)'}">
								<view class="family_name">{{item.title || ''}}</view>
							</view>
							<view class="family_num">
								<view class="family_number">{{item.family_num || 0}}</view>
								<view class="family_numtxt">家族</view>
							</view>			
							<view class="divide"></view>
							<view class="area_num">
								<view class="family_number">{{item.area_num || 0}}</view>
								<view class="family_numtxt">省份</view>
							</view>
						</view>
						<view class="arrow">></view>
					</view>
				</scroll-view>
			</view>
			
		</view>  
		
			  
		<q-tabbar :active="1" :count="[0,0,0,0,0]"></q-tabbar>
		
	</view>
</template>

<script>
	import {getxingshi} from "@/utils/api/zupu.js";
	import {getGenhome} from "@/utils/api/user.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	export default {
		data(){
			return {
				keywords:"",
				list: [],
				current_page: 2,
				photo_cdn1,
				statusBarHeight: 0, //通知栏高度
				titleVlaue:'',
				contentVlaue:'',
			}
		},
		onLoad(){
			this.getCardList();
			this.getListfun();
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
		},
		methods:{
			getListfun(){
				getGenhome().then(res=>{
					this.titleVlaue = res.data.list.title;
					this.contentVlaue = res.data.list.conetn;
				})
			},
			upper: function(e) {
				this.current_page++;
				this.getCardList(this.current_page);
			},
			getCardList(e){
				getxingshi(e).then(res=>{
					console.log(res.data) 
					this.current_page = res.data.current_page;
					// this.list = res.data.data;
					for(var i=0; i< res.data.data.length; i++){
						this.list.push(res.data.data[i]);
					}
					this.last_page = res.data.last_page;
					this.per_page = res.data.per_page;
					this.total = res.data.total;
				})
			},
			//跳转
			jump1(e){
				// this.$api.msg("请联系管理员");
				
				uni.showModal({
					title: this.titleVlaue,
					content: this.contentVlaue,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

				return;
				uni.navigateTo({
					url: '/pages/zupu/card/card?id='+e
				});
			},
			jump(e){
				uni.navigateTo({
					url: '/pages/zupu/card/card?id='+e
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "./genehome.scss";
</style>